<template>
  <div id="hello">
    <div class="header">
      <img src="../assets/index/qy-logo.svg" alt="">
      <input type="text" name="" id="" placeholder="搜索贴子/约伴/锦囊">
      <img src="../assets/index/usr-login.png" alt="" @click="login">
    </div>
    <div class="nav">
      <router-link to='/guide'>
        <img src="../assets/index/锦囊.png" alt="">
      </router-link>
      <router-link to='/bbs'>
      <img src="../assets/index/游记.png" alt="">
      </router-link>
      <router-link to='/assistant'>
      <img src="../assets/index/行程助手.png" alt="">
      </router-link>
      <router-link to='/ask'>
      <img src="../assets/index/问答.png" alt="">
      </router-link>
    </div>
    <div class="nav">
      <router-link to='/place'>
      <img src="../assets/index/目的地.png" alt="">
      </router-link>
      <router-link to='/shopping'>
      <img src="../assets/index/商城.png" alt="">
      </router-link>
      <router-link to=''>
      <img src="../assets/index/酒店.png" alt="">
      </router-link>
      <router-link to='/feeds'>
      <img src="../assets/index/约伴.png" alt="">
      </router-link>
    </div>
    <div class="mainDiscount">
      <h2>主打折扣</h2>
      <div class="ul-box">
        <div class="ul-discountInfo">
          <ul>
            <li v-for="(item,i) in discount" :key=i>
              <router-link class='Disinfo' :to="{
                name:'Detailed',
                query:{
                  detailNo:item.numbers,
                  userview:item.userView,
                  isbuy:item.isbuy,
                  money:item.money
                }
              }">
                <img :src="item.img" alt="">
                <p>{{item.info}}</p>
                <div class="price">
                  <em>{{item.money}}</em>元起
                </div>
              </router-link>
            </li>
            <li class="more">
              <div>
                <img src="../assets/index/更多.svg" alt="">
              </div>
              千款折扣
              查看更多
            </li>
          </ul>
        </div>
      </div>
    </div>
    <section>
      <div class="section-head">
        <h2>精选玩乐</h2>
        <div class="section-body">
          <ul>
            <li>
              <router-link to="/transfer">
                <img src="../assets/index/特价机票.png" alt="">
                <span>特价机票</span>
              </router-link>
            </li>
            <li>
              <router-link to="/transfer">
                <img src="../assets/index/机酒自由行.png" alt="">
                <span>机酒自由行</span>
              </router-link>
            </li>
            <li>
              <router-link to="/transfer">
                <img src="../assets/index/当地玩乐.png" alt="">
                <span>当地玩乐</span>
              </router-link>
            </li>
            <li>
              <router-link to="/transfer">
                <img src="../assets/index/门票票券.png" alt="">
                <span>门票/票券</span>
              </router-link>
            </li>
            <li>
              <router-link to="/transfer">
                <img src="../assets/index/日本高铁.png" alt="">
                <span>日本高铁</span>
              </router-link>
            </li>
            <li>
              <router-link to="/transfer">
                <img src="../assets/index/wifi电话.png" alt="">
                <span>WiFi电话卡</span>
              </router-link>
            </li>
            <li>
              <router-link to="/transfer">
                <img src="../assets/index/欧铁频道 .png" alt="">
                <span>欧铁频道</span>
              </router-link>
            </li>
            <li>
              <router-link to='/insurance'>
                <img src="../assets/index/保险频道.png" alt="">
                <span>保险频道</span>
              </router-link>
            </li>
            <li>
              <router-link to='/transfer'>
                <img src="../assets/index/接送机包车.png" alt="">
                <span>接送机/包车</span>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <page></page>
    <footer>
      <p class="links">
        <a href="">手机版</a>
        <a href="">电脑版</a>
        <a href="">APP</a>
        <a href="">意见反馈</a>
      </p>
      <p class="copyright">
        2004-2019 ©北京穷游天下科技发展有限公司™
        <br>
        京ICP备12003524号 | 电话 010 64554669
      </p>
    </footer>
    <aside v-show='isshow'>
      <a href="https://dpl.qyer.com/app/guide/applinks.html?@=launcher?campaign=m_homepage&category=minfloat&ifload=1&ifurl=https%3A%2F%2Fm.qyer.com%2F&iftitle=">
        <img src="../assets/index/app下载.png" alt="">
      </a>
    </aside>
    <div class="aside" v-if="show" v-show='!isshow'>
      <p><img src="../assets/index/关闭.png" alt="" @click="closeapp"></p>
      <img class="botapp" src="../assets/index/下载app.png" alt="">
    </div>
  </div>
</template>

<script>
  import page from '@/components/page'
export default {
  name: 'HelloWorld',
  data () {
    return {
      discount:[
        {
          img:require('@/assets/index/discount_1.jpg'),
          info:'天津直飞芽庄5-6天半自助游（优质越南航空/1-2天自由行/赠送京津往返接送大巴/赠送意外险/市区游）',
          money:'499'
        },
        {
          img:require('@/assets/index/discount_2.jpg'),
          info:'香港直飞越南富国岛4-6天往返含税机票（免签网红海岛+正点航班+灵活安排行程+多团期出发）',
          money:'1439'
        },
        {
          img:require('@/assets/index/discount_3.jpg'),
          info:'[6月5号端午节特价]上海/杭州/宁波/常州直飞越南芽庄5-6天自由行（芽庄珍珠岛亲子乐园+自选酒店星级+优质航班多重选择+赠送旅游险/往返专车接送服务+可私人订制）',
          money:'2399'
        },
        {
          img:require('@/assets/index/discount_4.jpg'),
          info:'北京/天津直飞泰国曼谷/普吉岛/清迈/苏梅5-7天往返含税机票(优质航班/特价机票)',
          money:'2399'
        }
      ],
      isshow:false,
      show:true
    }
  },
  components:{
    page:page
  },
  mounted(){
    window.addEventListener('scroll', this.handleScroll)
  },
  methods:{
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if(scrollTop > 1200 && this.show==true){
        this.isshow = false
      }else{
        this.isshow = true
      }

    },
    closeapp(){
      this.show=false;
    },
    login(){
      this.$router.push({
        path:'/login'
      })
    }
  }
}
</script>


<style lang="less">
  *{
     box-sizing:border-box;
  }
  #hello{
    .header{
      margin-top:8px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 25px;
      img:first-child{
        height: 20px;
      }
      img:last-child{
        height: 25px;
      }
      input{
        border:1px solid transparent;
        font-size:12px;
        height:25px;
        border-radius: 10px;
        outline:none;
        width:60%;
        padding-left:40px;
        background-color: #f0f0f0;
        background-image:url(../assets/index/搜索.svg);
        background-repeat:no-repeat;
        background-size: contain;
        background-position: left 10px center;
      }
    }
    .nav{
      margin-left: 8px;
      display:flex;
      flex-wrap:nowrap;
      justify-content:space-around;
      margin-top: 15px;
      img{
        width:70px;
        height:70px;
      }
    }
     .mainDiscount{
      margin-left: 8px;
      margin-top:2.5em;
      .ul-box{
        height:200px;
        overflow-y:hidden;
        .ul-discountInfo{
          height:220px;
          overflow: auto;
          ul{
            list-style-type: none;
            margin:0;
            width:750px;
            padding:0;
            height:220px;
            overflow-x: auto;
            overflow-y: hidden;
            li{
              float:left;
              white-space: nowrap;
              width:160px;
              .Disinfo{
                display:block;
                border:1px solid #f0f0f0;
                border-radius:10px;
                margin-right: 10px;
                img{
                  width:100%;
                  border-radius:10px 10px 0 0;
                }
                p{
                  white-space:normal;
                  padding:5px;
                  margin-top:10px;
                  height:3em;
                  overflow: hidden;
                  font-weight: bold;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient:vertical;
                }
                .price{
                  padding:5px;
                  font-weight:bold;
                  color:#d0d0d0;
                  em{
                    color:pink;
                  }
                }
              }
            }
            .more{
              height:200px;
              overflow-x:auto;
              width:5em;
              white-space:normal;
              text-align: center;
              img{
                margin-top:60px;
                width:30px;
              }
            }
          }
        }
      }
    }
    section{
      margin-left: 8px;
      .section-head{
        margin-top:35px;
        .section-body{
          ul{
            list-style-type:none;
            margin:0;
            padding: 0;
            display: flex;
            flex-wrap:wrap;
            justify-content:space-around;
            li{
              width:33.3%;
              a{
                margin:auto;
                display:block;
                margin-bottom:10px;
                width:7.6em;
                height:3em;
                position: relative;
                text-decoration: none;
                color:black;
                border:1px solid rgba(0,0,0,.1);
                border-radius:8px;
                img{
                  width:2em;
                  height:1.8em;
                  position:absolute;
                  bottom: 0;
                  right: 0;
                }
                span{
                  display:block;
                  padding:6px;
                }
              }
            }
          }
        }
      }
    }
    footer{
      // margin-right:-8px;
      // margin-left: -8px;
      width:100%;
      padding-bottom:30px;
      background-color:#2d3741;
      .links{
        display:flex;
        margin:0;
        justify-content:space-around;
        font-size:18px;
        a{
          display:inline-block;
          text-decoration: none;
          color:#9ea3ab;
          padding:10px;
        }
      }
      .copyright{
        color:#656669;
        text-align:center;
        font-size:0.8em;
        margin-bottom:-8px;
      }
    }
    footer::before{
      content:'';
      display:block;
      height:5px;
      width:100%;
      background-color: #2bab79;
    }
    aside{
      position:fixed;
      right:0;
      bottom:0;
      width:130px;
      height:130px;
      display:flex;
      align-items:center;
      a{
        display:block;
        img{
          width:100%;
        }
      }
    }
    .aside{
      position:fixed;
      width:100%;
      bottom:0;
      margin-left:-8px;
      margin-bottom: -3px;
      p{
        position:absolute;
        right:0;
        top:-1em;
        img{
          width:1.5em;
          height:1.5em;
        }
      }
      .botapp{
        width:100%;
      }
    }
  }
</style>
